<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        文件上传<input type="file" onchange="upload(event)"/>
    </div>
    Progress:
    <div id="progress"></div>
    Output:
    <div id="output"></div>
</body>
<script>
 var progressDOM = document.getElementById('progress');
 var outputDOM = document.getElementById('output');
 var hel = 'hello'
 function upload(event){
    let files = event.target.files, // 获取上传标签所有的文件。
        type = 'default',//上传文件类型
        output = progressDOM, //上传文件输入
        progress = outputDOM,//上传文件进入
        fileReader = new FileReader(); //实例化异步文件读取器
    for(let i = 0; i < files.length ;i++){ //遍历所有的文件实例
        // 区分文件类型
        console.info('files[i].type--',files[i].type)
        if(/image/.test(files[i].type)){
            type = 'image'; //文件为图片
            fileReader.readAsDataURL(files[i]);//读取文件并将内容的数据 URI 保存在 result 属性中。
        } else {
            type = 'text'; //文件为文本
            fileReader.readAsText(files[i],'');//从文件中读取纯文本内容并保存在 result 属性中,第二个参数表示编码，是可选的。
        }
        // 监听文件读取过程(每各50ms触发一次)
        fileReader.onprogress = function(event){
            if(event.lengthComputable){ //Boolean 表示ProgressEvent 所关联的资源是否具有可以计算的长度。
            //ProgressEvent.loaded 只读属性是一个整数，表示底层的进程已经执行的工作量。
            //可以使用该属性和 ProgressEvent.total 计算完成工作的比率。
            progress.innerHTML = `${event.loaded / event.total}`
            console.info(`${event.loaded / event.total}`);
            }
        }
        // 当读取由于错误（例如，由于找不到文件或不可读）而失败时，将触发该事件
        fileReader.onerror = function(){
            // 触发 error 事件时，FileReader 的 error
            // 属性会包含错误信息。这个属性是一个对象，只包含一个属性：code。这个错误码的值可能是 1（未找
            // 到文件）、2（安全错误）、3（读取被中断）、4（文件不可读）或 5（编码错误）。
            output.innerHTML = "Could not read file, error code is " + fileReader.error.code;
        }
        // 监听文件成功读取时，执行load 事件(如果 error 事件被触发，则不会再触发 load 事件。)
        fileReader.onload = function(){
            let html = '';
            switch(type){
                case "image":
                    html = `<img src=${fileReader.result}>`;
                    break;
                case "text":
                    html = fileReader.result;
                    break;
            }
            output.innerHTML = html;
        };
    };
 }
</script>
</html>